<template lang="html">
  <div class="bids-detail">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="标题">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="编号">
        <el-input v-model="form.deadline"></el-input>
      </el-form-item>
      <el-form-item label="服务年限">
        <el-input v-model="form.deadline" type="number"></el-input>
      </el-form-item>
      <el-form-item label="数量">
        <el-input v-model="form.itemNum" type="number"></el-input>
      </el-form-item>
      <el-form-item label="图片上传">
        <upload-image @upload="upload" @del="del"></upload-image>
        <el-dialog v-model="dialogVisible" size="tiny">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <div class="editor-wrapper">
        <wang-editor></wang-editor>
      </div>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import wangEditor from 'components/backend/wangEditor/wangEditor'

import UploadImage from 'components/backend/uploadImage/uploadImage'

import {delOneArrItem} from 'common/js/delOneArrItem.js'

import {postBids} from 'api/bids-detail.js'

import {loadToken} from 'common/js/cache.js'

export default {
  data() {
    return {
      form: {
        title: '',
        deadline: '',
        itemNum: '',
        content: ''
      },
      dialogImageUrl: '',
      dialogVisible: false,
      uploadSuccess: []
    }
  },
  methods: {
    onSubmit() {
      postBids(this.form.title, this.form.deadline, this.form.itemNum, this.form.content, loadToken()).then((res) => {
        console.log(res)
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    upload(file) {
      this.uploadSuccess.push(file.data[0].id)
    },
    del(file) {
      let delItemIndexId = file.response.data[0].id
      this.uploadSuccess = delOneArrItem(this.uploadSuccess, delItemIndexId)
    }
  },
  components: {
    wangEditor, UploadImage
  }
}
</script>

<style lang="scss">
.bids-detail{
  border: 1px solid #ccc;
  margin-left: 20px;
  border-radius: 5px;
  padding-top: 20px;
  padding-right: 20px;
  margin-bottom: 80px;
}
.editor-wrapper {
    margin: 0 0 25px 20px;
}
.w-e-text{
  padding-top: 10px;
}
</style>
